<template>
  <div class="box">
    <van-form @submit="onSubmit" @failed="onFailed" :show-error-message="false" show-error scroll-to-error>
      <van-field
        name="loginName"
        v-model="form.loginName"
               :left-icon="require('@/assets/img/user.png')"

        autocomplete="off"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.mobilePhone"
        name="mobilePhone"
                :left-icon="require('@/assets/img/shouji.png')"

        autocomplete="off"
        type="tel"
        placeholder="请输入手机号码"
        :rules="[
          { required: true, message: '请填写您的手机号码！' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }
        ]"
      />
      <van-field
        center
        clearable
        v-model="form.verifyCode"
        autocomplete="off"
        name="verifyCode"
               :left-icon="require('@/assets/img/ma.png')"

        placeholder="请输入短信验证码"
        :rules="[{ required: true, message: '请输入短信验证码' }]"
      >
        <template #button>
          <div class="btn_get" native-type="button" v-show="!isTime" @click="getCode">获取验证码</div>
          <van-count-down
            ref="countDown1"
            :time="time"
            @finish="overTime"
            :auto-start="false"
            v-show="isTime"
            format="ss秒"
          />
        </template>
      </van-field>
      <van-field
        v-model="form.passwordm"
        autocomplete="off"
        name="passwordm"
        :left-icon="require('@/assets/img/mima.png')"
        type="password"
        placeholder="请设置6-20位新的登录密码"
        :rules="[{ required: true, message: '请输入登录密码' },{validator:validPassword,message: '请设置6-20位登录密码'}]"
      />
      <van-field
        v-model="form.password2"
        autocomplete="off"
        name="password2"
                :left-icon="require('@/assets/img/mima2.png')"

        type="password"
        placeholder="请再次输入新的登录密码"
        :rules="[{ required: true, message: '请再次输入登录密码' },{validator,message: '两次输入密码不一致'}]"
      />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { Field, Cell, CellGroup, Button, CountDown, Form, Toast } from 'vant'
import { getValue, setValue } from '../../utils/auth'
import crypto from 'crypto'
import { sendVerifyCodeForRegister, register, postHandle } from '@/api/record'
export default {
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [CountDown.name]: CountDown,
    [Form.name]: Form,
    [Toast.name]: Toast,
    [Button.name]: Button
  },
  data() {
    return {
      isTime: false, // 倒计时是否开启
      time: 60 * 1000,
      form: {
        loginName: '', // 用户名
        passwordm: '', // 密码
        mobilePhone: '', // 手机号
        verifyCode: '', // 验证码
        roleCode: '', // 角色编码
        isAudit: '', // 是否需要审核
        password2: ''
      },
      codeLoading: false,
      loading: false //
    }
  },

  created() {},
  methods: {
    // 保存
    onSubmit() {
      this.loading = true
      const datas = this.form
      const sha1 = crypto.createHash('sha1')
      sha1.update(this.form.passwordm)
      datas.password = sha1.digest('hex')
      if (getValue('fzm_isAudit')) {
        datas.roleCode = getValue('fzm_isAudit') == 0 ? 'person' : 'expert'
        datas.isAudit = getValue('fzm_isAudit')
      }
      register(datas).then(res => {
        if (res.status === 0) {
          setValue('userAccId', res.data.userAccId)
          if (getValue('fzm_isAudit') == 0) {
            this.$bridge.call('login')
          } else {
            this.$bridge.call('addExpertInfo')
          }
        } else {
          Toast(res.msg)
        }
        this.loading = false
      })
    },
    // 获取验证码
    getCode() {
      const reg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (reg.test(this.form.mobilePhone) && this.form.loginName) {
        if (!this.codeLoading) {
          this.codeLoading = true
          const sha1 = crypto.createHash('sha1')
          const data = {
            loginNameTemp: this.form.loginName,
            phoneNumber: this.form.mobilePhone,
            sign: ''
          }
          sha1.update(data.phoneNumber.split('').reverse().join(''))
          const phone_sha = sha1.digest('hex')
          data.sign = phone_sha.substring(10, 20)
          Toast.loading({
            forbidClick: true,
            duration: 0
          })
          // postHandle('/agri/api/common/tenant/sendVerifyCodeForRegister?loginNameTemp=' + data.loginNameTemp, data).then(res => {
          //   console.log(res)
          // })
          // return
          sendVerifyCodeForRegister(data).then(res => {
            console.log(res)
            this.codeLoading = false

            if (res.status === 0) {
              Toast.success('发送成功')
              this.isTime = true

              this.$refs.countDown1.start()
            } else {
              Toast(res.msg)
            }
          })
        }
      }
    },
    // 倒计时结束
    overTime() {
      this.isTime = false
      this.$refs.countDown1.reset()
    },
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    // 校验新密码位数
    validPassword(val) {
      const reg = /^[0-9a-zA-Z]{6,20}$/
      if (reg.test(val)) return true
      Toast.fail('请设置6到20位密码长度')
      return false
    },
    validator(val) {
      if (val === this.form.passwordm) {
        return true
      } else {
        Toast.fail('两次输入的密码不一致!')
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  .add-btn {
    padding-bottom: 20px;
  }
  .btn_get {
    color: #37B5B5;
    // background-color: #37b5b5;
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    font-weight: 400;
    font-size: 14px;
  }
}
</style>
